<script lang="ts" setup>
import PageTable from "@/components/PageTable/index.vue";
import SearchHeader from "@/components/SearchHeader/index.vue";
import PageContainer from "@/components/PageContainer/index.vue";
import {reactive, ref} from "vue";
import {Notification} from '@element-plus/icons-vue'
import ProjectDialog from "@/views/project/components/ProjectDialog.vue";
import {ownerContractList, projectById} from "@/api/demoApi";
import {message} from "@/utils/message";
import {useRouter} from "vue-router";

defineOptions({
  name: "ownerProjectCard"
});

/**-------------------搜索-------------------**/
//查询参数
const queryList = [
  {key:'projectNo',label:'项目名称',type:'input'},
  {key:'projectName',label:'所属业主',type:'input'},
  {key:'projectName',label:'合同状态',type:'select',options:[
      {label:'新签待签',value: 0},
      {label:'待审核',value: 1},
      {label:'合同正常',value: 2},
      {label:'已完成',value: 3},
    ]},
]
//分页
const pageQuery = reactive({
  page:1,
  size:15
})
//查询回调
const searchHandler = (queryForm)=>{
  console.log(queryForm)
}
//分页回调
const paginationHandler = (pageInfo) =>{
  pageQuery.page = pageInfo.page
  pageQuery.size = pageInfo.size
}

/**-------------------列表-------------------**/
//总条数
const total = ref(0)
//表格列
const tableColumns = [
  {label:'项目',key:'projectName'},
  {label:'所属业主',key:'ownerName'},
  {label:'站点数量',key:'stationCount'},
  {label:'电费单价',key:'eleUnit'},
  {label:'是否浮动',key:'isFloat',custom:true},
  {label:'浮动比例',key:'floatCount'},

  {label:'租金G',key:'rentG'},
  {label:'租金S',key:'rentS'},
  {label:'对私年均分摊',key:'segmentOncePrivate'},
  {label:'对公年均分摊',key:'segmentOncePublic'},
  {label:'电费保证金',key:'eleDeposit'},
  {label:'场租保证金',key:'rentDeposit'},
  {label:'合同状态',key:'status',custom:true},
  {label:'操作',key:'operation',custom:true,width: 250}
]
//表格行数据
const tableData = ref([])
const getTableData = ()=>{
  tableData.value = ownerContractList()
}
getTableData()

/**-------------------操作-------------------**/
//弹窗
const projectDialog = ref()
const router = useRouter()
const openDialog = (type:string,row:object)=>{

}

//未完成提示
const notDone = ()=>{
  message('抱歉，功能设计中...',{type:'warning'})
}
</script>

<template>
  <PageContainer>
    <!--顶部筛选-->
    <SearchHeader :query-list="queryList" @search="searchHandler" />
    <!--    表格-->
    <PageTable :columns="tableColumns" :page="pageQuery.page" :size="pageQuery.size" :table-data="tableData" :total="total" @pagination="paginationHandler">
      <template #isFloat="{row}">
        <el-tag v-if="row.isFloat===0" type="primary">否</el-tag>
        <el-tag v-if="row.isFloat===1" type="primary">是</el-tag>
      </template>
      <template #status="{row}">
        <el-tag v-if="row.status===0" type="primary">新签待签</el-tag>
        <el-tag v-if="row.status===1" type="warning">待审核</el-tag>
        <el-tag v-if="row.status===2" type="success">合同正常</el-tag>
        <el-tag v-if="row.status===3" type="danger">已完成</el-tag>
      </template>
      <template #operation="{row}">
        <el-button v-if="row.status !== 0" :icon="Notification" plain round size="small" type="success" @click="notDone">项目卡片</el-button>
      </template>
    </PageTable>

    <!--    绑定业主-->
    <ProjectDialog ref="projectDialog" @done="getTableData" />
  </PageContainer>
</template>

<style lang="scss" scoped>

</style>
